<template>
<div id="building" style=" width: 100%; height: 100vh; overflow: hidden"  >


  <div style="width: 400px; margin: 150px auto">

<div style="color: #E8F0FE; font-size:30px; text-align: center  "> 欢迎注册</div>

    <el-form ref="form" :model="form"  size="normal"  :rules="rules">
      <el-form-item prop="username">
        <el-input v-model="form.username" maxlength="24" @input="accountInput" placeholder="请输入用户名"></el-input>
<!--        <el-input v-model="form.username"   placeholder="请输入用户名" prefix-icon="el-icon-user" ></el-input>-->
      </el-form-item>
      <el-form-item prop="nickname">
        <el-input v-model="form.nickname"  placeholder="请输入昵称"  ></el-input>
      </el-form-item>

      <el-radio style="color: #E8F0FE" v-model="form.sex" label="男">男</el-radio>
      <el-radio style="color: #E8F0FE" v-model="form.sex" label="女">女</el-radio>
      <el-radio style="color: #E8F0FE" v-model="form.sex" label="未知">未知</el-radio>
      <el-form-item prop="address">
        <el-input v-model="form.address"   placeholder="请输入地址"  ></el-input>
      </el-form-item>
      <el-form-item prop="age">
        <el-input v-model="form.age"   placeholder="请输入年龄"  ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password"   status-icon
                  prefix-icon="el-icon-key" show-password placeholder="请输入密码" ></el-input>
      </el-form-item>
      <el-form-item prop="confirm">
        <el-input v-model="form.confirm"   status-icon
                  :rules="rules" prefix-icon="el-icon-key" show-password  placeholder="请输入确认密码" ></el-input>
      </el-form-item>
      <span  style="text-align: center;color: #E8F0FE">注册默认未激活账户，请联系管理员进行账户激活</span>
      <el-button style="width: 100%;margin-top: 20px" type="primary" @click="register" >注 册</el-button>


      </el-form>
    <el-button style="width: 100%; margin-top: 20px" type="primary" @click="$router.push('/login')" >返回登陆</el-button>

</div>



</div>
</template>
<style>
#building{
  background:url("../assets/index.jpg");

  position:fixed;
  background-size:100% 100%;}
</style>
<script>
import request from "../utils/request";

export default {
  name: "Register",
  data(){


    return{
      form:{},


      rules: {
        username:[{required:true , message: "请输入用户名" ,trigger:"blur"

        }],
        password:[ {required:true , message: "请输入密码" ,trigger:"blur"

        }],
        confirm:[ {required:true , message: "请再次输入密码" ,trigger:"blur"

        }],

      },
    }
  },


  methods: {

    accountInput(val){//账号的实时输入
      console.log(val);
      let codeReg = new RegExp("[A-Za-z0-9]+"), //正则 英文+数字；
          len=val.length,
          str='';
      for(let i=0;i<len;i++){
        if(codeReg.test(val[i])){
          str+=val[i];
        }else {
          this.$message({

            type:"error",
            message:"只能使用英文加数字哦"
          })


        }
      }
      this.form.username=str;
    },

    register(){
      if(this.form.password!==(this.form.confirm)){
        this.$message({

          type:"error",
          message:"两次密码不一样"
        })
      }else {
        this.$refs['form'].validate((valid) => {
              request.post("/user/register",this.form).then(res =>{
                if (res.code ==="0"){
                  this.$messageBox({
                    type:"success",
                    message:"注册成功"
                  })
                  this.$router.push("/login")
                }else {
                  this.$messageBox({
                    type:"error",
                    message:res.msg
                  })
                }

              })


            }
        )
      }



    }




  }

}
</script>

<style scoped>

</style>